<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
	xmlns:of="http://omnifaces.org/functions"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/templates/main_template.xhtml">

	<ui:define name="header">
		<script type="text/javascript">
			//<![CDATA[
			//debe usarse los \\:  en lugar de : en los selectores de JQuery
			$(document).ready(
					function() {/* jquery code*/
						showContent("form_content", "personal_data.xhtml");
						$("#form_wizard\\:personalData").addClass(
								"current-edition").removeClass(
								"disabled-edition").removeClass(
								"enabled-edition");

					});

			function setCurrentPageStyle(xhr, status, args, arg0) {				
				if (args.view != undefined  && args.view != "empty") {					
					showContent("form_content", args.view);
					$(".current-edition").removeClass("current-edition")
							.addClass("enabled-edition");
					$("#" + arg0.source.replace(":", "\\:")).addClass(
							"current-edition").removeClass("disabled-edition")
							.removeClass("enabled-edition");
				}
			}
			function showWizardPage(page) {
				showContent("form_content", page);
			}
			function wizardSetCurrentPageStyle(arg0) {
				$(".current-edition").removeClass("current-edition").addClass(
						"enabled-edition");
				$("#" + arg0.replace(":", "\\:")).addClass("current-edition")
						.removeClass("disabled-edition").removeClass(
								"enabled-edition");
			}

			//]]>
		</script>
	</ui:define>
	<ui:define name="content">	
		<div id="step-by-step clearfix">
			<h:form id="form_wizard" styleClass="clearfix ui-wizard">
				<p:commandLink id="personalData"
					actionListener="#{stepByStepController.viewPersonalData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="enabled-edition  float-left text-align-center">
					<div class="ui-button-personal-data">
						<span class="ui-step-number">1</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="personalData"
					value="#{i18n['lbl.owner.personal_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="contactData"
					actionListener="#{stepByStepController.viewContactData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step1 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-contact-data">
						<span class="ui-step-number">2</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="contactData"
					value="#{i18n['lbl.owner.contact_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="economicData"
					actionListener="#{stepByStepController.viewEconomicData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step2 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-economic-data">
						<span class="ui-step-number">3</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="economicData"
					value="#{i18n['lbl.owner.economic_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="innovationData"
					actionListener="#{stepByStepController.viewInnovationData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step3 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-innovation-data">
						<span class="ui-step-number">4</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="innovationData"
					value="#{i18n['lbl.owner.innovation.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="associativityData"
					actionListener="#{stepByStepController.viewAssociativityData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step4 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-associativity-data">
						<span class="ui-step-number">5</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="associativityData"
					value="#{i18n['lbl.owner.associativity.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="associativityDataB"
					actionListener="#{stepByStepController.viewAssociativityDataB}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step5 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-associativity-data">
						<span class="ui-step-number">6</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="associativityDataB"
					value="#{i18n['lbl.owner.associativity.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="farmData"
					actionListener="#{stepByStepController.viewFarmData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step6 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-farm-data">
						<span class="ui-step-number">7</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="farmData"
					value="#{i18n['lbl.owner.farm_general_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="farmDataB"
					actionListener="#{stepByStepController.viewFarmDataB}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step7 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-farm-data">
						<span class="ui-step-number">8</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="farmDataB"
					value="#{i18n['lbl.owner.farm_general_data.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->

				<p:commandLink id="agrarianBusinessData"
					actionListener="#{stepByStepController.viewAgrarianBusinessData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step8 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-forest-business-data">
						<span class="ui-step-number">9</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="agrarianBusinessData"
					value="#{i18n['lbl.owner.agrarian_business_perspective.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="animalBusinessData"
					actionListener="#{stepByStepController.viewAnimalBusinessData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step9 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-forest-business-data">
						<span class="ui-step-number">10</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="animalBusinessData"
					value="#{i18n['lbl.owner.animal_business_perspective.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->


				<p:commandLink id="forestBusinessData"
					actionListener="#{stepByStepController.viewForestBusinessData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step10 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-forest-business-data">
						<span class="ui-step-number">11</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="forestBusinessData"
					value="#{i18n['lbl.owner.forest_business_perspective.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="ownershipLearningData"
					actionListener="#{stepByStepController.viewOwnershipLearningData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step11 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-ownership-learning-data">
						<span class="ui-step-number">12</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="ownershipLearningData"
					value="#{i18n['lbl.owner.ownership_learning.title']}" />
				<!-- 				<h:outputText value="" styleClass="ui-arrow-wizard-icon float-left" /> -->
				<p:commandLink id="confirmationData"
					actionListener="#{stepByStepController.viewConfirmationData}"
					oncomplete="setCurrentPageStyle(xhr, status, args,this)"
					styleClass="#{stepByStepController.step12 ? 'enabled-edition': 'disabled-edition'}  float-left text-align-center">
					<div class="ui-button-confirmation-data">
						<span class="ui-step-number">13</span><span
							class="ui-flowbutton-icon" />
					</div>
				</p:commandLink>
				<p:tooltip for="confirmationData"
					value="#{i18n['lbl.owner.confirmation.title']}" />
			</h:form>
		</div>
		<br />
		
		<div id="form_content" class="clearfix" />

	</ui:define>
</ui:composition>